<!-- 图标选择器组件 license by http://eleadmin.com -->
<template>
  <el-popover
    v-model="show"
    :width="width"
    popper-class="ele-icon-picker-popper"
    placement="bottom-start"
    transition="el-zoom-in-top"
    :disabled="disabled"
    @show="afterEnter"
    @hide="afterLeave">
    <div :class="pickerClass" slot="reference">
      <slot v-bind:show="show" v-bind:value="value">
        <!-- 默认样式 -->
        <el-input
          :value="value"
            multiple
          :prefix-icon="value"
          :placeholder="placeholder"
          :clearable="clearable"
          :disabled="disabled"
          :size="size"
          suffix-icon="el-icon-arrow-down"
          @focus="setReadonly"
          @clear="clear"/>
      </slot>
    </div>
    <el-tabs v-model="active">

      <el-tab-pane
        v-for="(item,index) in result"
        :key="index"
        :label="item.title"
        :name="item.title">
        <el-scrollbar v-if="listShow" style="height: 225px;">
          <el-row>
            <el-col :span="4" v-for="(d,i) in item.icons" :key="i" style="margin-left: 20px">
                <div class="ele-icon-picker-item" @click="choose(d)">
                  <el-tag  :type=d.tag_color >{{d.tag_name}}</el-tag>
                </div>
            </el-col>
          </el-row>
        </el-scrollbar>
        <div v-else style="height: 225px;line-height: 225px;text-align: center;">
          {{ t('el.select.loading') }}..
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-input
      v-if="search"
      v-model="keywords"
      :placeholder="searchPlaceholder"
      size="mini"
      suffix-icon="el-icon-search"
      class="ele-icon-picker-search"/>
  </el-popover>
</template>

<script>
import icons from '../../../node_modules/ele-admin/packages/ele-icon-picker/src/icons.js';
import Locale from 'element-ui/src/mixins/locale';

export default {
  name: 'EleIconPicker',
  mixins: [Locale],
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // 选中图标, v-model绑定
    value: String,
    // 提示文本
    placeholder: String,
    // 宽度
    width: {
      type: Number,
      default: 380
    },
    // 图标数据
    data: {
      type: Array,
      default() {
        // return icons;
      }
    },
    // 尺寸
    size: String,
    // 是否只读
    readonly: {
      type: Boolean,
      default: true
    },
    // 是否禁用
    disabled: Boolean,
    // 是否显示清除
    clearable: {
      type: Boolean,
      default: true
    },
    // 风格样式
    theme: String,
    // 是否显示搜索
    search: {
      type: Boolean,
      default: true
    },
    // 搜索框提示文字
    searchPlaceholder: {
      type: String,
      default: '搜索...'
    }
  },
  data() {
    return {
      // 是否显示pop
      show: false,
      // 搜索关键字
      keywords: '',
      // 是否显示列表
      listShow: false,
      timer: null,
      tagList:{}
    };
  },
  computed: {
    // picker class
    pickerClass() {
      return [
        'ele-icon-picker',
        {'ele-icon-picker-open': this.show},
        {'ele-icon-picker-style2': this.theme === 'style2'},
        {'ele-icon-picker-style3': this.theme === 'style3'}
      ];
    },
    // 搜索后的结果
    result() {

      if (!this.keywords) {
        return this.tagList;
      }
      let result = [];
      this.tagList.forEach(item => {
        result.push({title: item.title, icons: item.icons.filter(d => d.tag_name.indexOf(this.keywords) !== -1)});
      });

      return result;
    },
    // 标签页选中位置
    active: {
      get() {
        if (!this.result || this.result.length === 0) {
          return null;
        }
        for (let i = 0; i < this.result.length; i++)
          if (this.result[i].icons.length !== 0) {
            return this.result[i].title;
          }
        return null;
      },
      set() {
      }
    }
  },
  mounted() {

    //获取标签
    this.getTagList();

  },
  methods: {
    /* 选择图标 */
    choose(value) {
      this.show = false;
      this.$emit('change', value.tag_name);
      this.$emit('setTagList',value);
    },
    getTagList(){
      this.$http.get('/tagManage/getTagList', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.listShow = true;
          this.tagList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    /* 清空选择 */
    clear() {
      this.$emit('change', '');
    },
    /* 设置input只读 */
    setReadonly(e) {
      if (this.readonly) {
        e.target.readOnly = true;
      }
    },
    /* 弹出面板打开 */
    afterEnter() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.listShow = true;
      }, 50);
    },
    /* 弹出面板关闭 */
    afterLeave() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.listShow = false;
    }
  },
  // 默认图标数据
  defaultIcons: icons
}
</script>

<style>
/* 弹出面板 */
.ele-icon-picker-popper.el-popover {
  max-width: 100%;
  padding: 4px 3px 15px 15px;
}

.ele-icon-picker-popper.el-popover .popper__arrow {
  left: 35px !important;
}

/* 选项卡 */
.ele-icon-picker-popper .el-tabs .el-tabs__item {
  padding: 0 12px !important;
}

.ele-icon-picker-popper .el-tabs .el-tabs__header {
  margin: 0 0 5px 0;
}

.ele-icon-picker-popper .el-tabs .el-tabs__header .el-tabs__nav-wrap:after {
  right: 12px;
  width: auto;
}

/* 图标 */
.ele-icon-picker-popper .el-card {
  margin: 10px 12px 0 0;
}

.ele-icon-picker-popper .el-card__body {
  padding: 0;
}

.ele-icon-picker-popper .ele-icon-picker-item {
  display: block;
  padding: 8px 0;
  font-size: 20px;
  text-align: center;
  transition: transform .1s;
  cursor: pointer;
}

.ele-icon-picker-popper .ele-icon-picker-item:hover {
  transform: scale(1.5);
}

/* 滚动条 */
.ele-icon-picker-popper .el-scrollbar__wrap {
  overflow-x: hidden;
  margin-right: 0 !important;
}

.ele-icon-picker-popper .el-scrollbar__wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 搜索框 */
.ele-icon-picker-popper .ele-icon-picker-search {
  width: 110px;
  position: absolute;
  right: 15px;
  top: 8px;
}

/* 默认样式 */
.ele-icon-picker .el-input:not(.is-disabled),
.ele-icon-picker .el-input:not(.is-disabled) .el-input__inner,
.ele-icon-picker .el-input-group__append {
  cursor: pointer;
}

.ele-icon-picker .is-disabled > .el-input-group__append {
  cursor: not-allowed;
}

.ele-icon-picker .el-input:not(.is-disabled) .el-input__prefix,
.ele-icon-picker:not(.ele-icon-picker-style3) .el-input:not(.is-disabled) .el-input-group__append {
  color: unset;
}

.ele-icon-picker .el-input__suffix .el-input__clear {
  position: absolute;
  top: 0;
  right: 0;
}

.ele-icon-picker .el-input__suffix .el-input__clear:before {
  background-color: #fff;
  border-radius: 50%;
}

.ele-icon-picker-open .el-input .el-input__suffix .el-icon-arrow-down,
.ele-icon-picker-open.ele-icon-picker-style3 .el-input-group__append .el-icon-arrow-down {
  transform: rotate(-180deg);
}

.ele-icon-picker .el-input__suffix .el-icon-arrow-down,
.ele-icon-picker-style3 .el-input-group__append .el-icon-arrow-down {
  transition: transform .3s;
}

/* 样式二 */
.ele-icon-picker-style2 .el-input-group__append {
  min-width: 39px;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

.ele-icon-picker-style2 .el-input__suffix {
  transition: transform 0s;
}

/* 样式三 */
.ele-icon-picker-style3 {
  display: inline-block;
}

.ele-icon-picker-style3 .el-input {
  width: auto;
}

.ele-icon-picker-style3 .el-input__inner {
  width: 47px;
  pointer-events: none;
}

.ele-icon-picker-style3 .el-input__prefix {
  left: 12px;
}

.ele-icon-picker-style3 .el-input-group__append {
  padding-left: 5px;
  padding-right: 5px;
}

.ele-icon-picker-style3 .el-input:not(.is-disabled) .el-input-group__append {
  background-color: transparent;
}

.ele-icon-picker-style3 .el-input:not(.is-disabled) .el-input-group__append:hover {
  background-color: rgba(0, 0, 0, .02);
}
</style>
